<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		.box{
			width: 100px;
			height: 100px;
			background-color: red; 
			margin-top: 5px;
		}
		.box1{    
          display: table-cell;    
          vertical-align: middle;    
          text-align: center;  
                   
        }
        .box2{    
        	display: flex;    
        	justify-content:center;    
        	align-items:Center;
        }
        .box3{
		    position:relative;
		}
		.box3 span{           
		     position: absolute;          
		     width:100px;          
		     height: 50px;           
		     top:50%;           
		     left:50%;            
		     /*margin-left:-50px;            
		     margin-top:-25px; */  
		     transform: translate(-50%,-50%);        
		     text-align: center;       
		 }
		 .box4 span{ 
		     width: 50%;   
		     height: 50%;    
		     background: #000; 
		     overflow: auto;   
		     margin: auto;   
		     position: absolute;   
		     top: 0; 
		     left: 0;
		     bottom: 0; 
		     right: 0;  
		}
		.box6 span{            
		    position: absolute;            
		    top:50%;            
		    left:50%;            
		    width:100%;            
		    transform:translate(-50%,-50%);            
		    text-align: center;        
		}
		.box7{  
		    text-align:center;  
		     font-size:0;
		}
		.box7 span{  
		    vertical-align:middle;  
		     display:inline-block;  
		     font-size:16px;
		}
		.box7:after{ 
		     content:'';  
		    width:0;  
		    height:100%; 
		     display:inline-block;  
		    vertical-align:middle;
		}
		.box8{    
		    display: flex;    
		    text-align: center;
		}
		.box8 span{
		    margin: auto;
		}
		.box9{   
		     display: -webkit-box;   
		     -webkit-box-pack:center;  
		     -webkit-box-align:center;   
		     -webkit-box-orient: vertical;    
		     text-align: center
		}
	</style>
</head>
<body>
	<div class="box box1">
	    <span>垂直居中</span>
	</div>
	<div class="box box2">
		哈哈哈
	</div>
	<div class="box box3">
		<span>
			hahahaaaaaaa
		</span>
	</div>

	<div class="box box4">
		<span>
			绝对定位的方式
		</span>
	</div>
	<div class="box box6">
		<span>
			translate
		</span>
	</div>
	<div class="box box7">
		<span>
			display: inline-block;
		</span>
	</div>
	<div class="box box8">
		<span>
			display:flex和margin:auto
		</span>
	</div>
	<div class="box box9">
		     display: -webkit-box;
	</div>
</body>
</html>